<template>
	<view class="List">

		<template v-if="dataList[0]">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="item" v-for="(item,index) in dataList" :key='index'>
					<u-checkbox v-model="item.checked" :name="item.order_id">
						<view class="u-m-l-20">
							<view class="item-bank u-m-t-10">订单号：{{item.order_no}}</view>
							<view class="bankNum">产品名称：{{item.name}}</view>
							<view class="bankNum" style="padding-top: 0;">{{item.user_name + ' - ' +  item.mobile}}
							</view>
							<view class="bankNum" style="padding-top: 0;">总金额：￥{{item.procurement_price}}</view>
						</view>
					</u-checkbox>

				</view>
			</u-checkbox-group>
		</template>

		<template v-else>
			<view class="empty">
				<u-empty text="暂无数据" mode="list"/>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js';
	import {
		GetQueryDataList,
		UpdateModifyData,
		adminPost
	} from '@/common/http.request.js'
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				checkList: []
			}
		},



		methods: {
			// 初始化
			initPage() {
				this._init_data('GetAuctionProductOrderList', {
					supplier_id: this.vuex_adminuser.supplier_id,
					business_id:this.vuex_adminuser.businessId,
					status: -1,
				}, {
					callBack: (row) => this.formatCallBack(row)
				})
			},
			checkboxGroupChange(e) {
				console.log(e)
				this.checkList = e
			},
			// 格式化接口返回的数据
			formatCallBack(row) {
				let data = row.filter(el => {
					if (!el.settlement && !this.check(el.pay_status)) {
						return el
					}
				})
				return data.reduce((pre, el) => {
					pre.push({
						...el,
						checked: false
					})
					return pre
				}, [])
			},
			$onReachBottom() {
				this._load_data({
					callBack: (row) => this.formatCallBack(row)
				});
			},
			check(status) {
				switch (status) {
					case 0:
						return true
					case 1:
						return true
					case 2:
						return true
					case 3:
						return true
					case 4:
						return false
					case 5:
						return false
					case 6:
						return true
					case 7:
						return true
					case 8:
						return true
					case 9:
						return false
					case 10:
						return false
					default:
						return false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.List {
		padding: 20rpx 26rpx 0;
	}

	.item {
		background-color: #fff;
		width: 100%;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		margin-bottom: 20rpx;

		.item-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10rpx;

			.it-icon {
				width: 30rpx;
				height: 34rpx;
			}
		}

		.bankNum {
			padding: 10rpx 0;
		}
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

		.btn {
			width: 698rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			color: #fff;
			background-color: #2d8cf0;
		}
	}
	
	.empty {
		height:60vh;
	}
	
</style>
